<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <div th:replace="comm/page::layui_css"/>
    <link rel="stylesheet" th:href="@{/res/js/lay-module/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/res/js/lay-module/dtree/font/dtreefont.css}">
</head>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-fluid">
            <input id="userId" type="hidden" th:value="${user?.Id}">
            <fieldset class="layui-elem-field layui-field-title" id="csk">
                <legend>用户角色设置</legend>
                <div class="layui-field-box">
                    <div class="layui-row layui-col-space10" style="margin-top: 10px;background: #f2f2f2">
                        <div class="layui-col-lg12 layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">选择角色</div>
                                <div class="layui-card-body">
                                    <div style="height: 350px;overflow: auto;">
                                        <ul id="cskTree1" class="dtree" data-id="0"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button class="layui-btn layui-btn-normal" id="save_btn">保存</button>
            </fieldset>
        </div>
    </div>
</div>

<div th:replace="comm/page::layui_script"/>
<script>
    var index = parent.layer.getFrameIndex(window.name);
    layui.use(['dtree', 'layer', 'jquery'], function () {
        var dtree = layui.dtree
            , layer = layui.layer, $ = layui.jquery;

        var userId = $("#userId").val();
        var DTreeNode = dtree.render({
            elem: "#cskTree1",
            url: "/user/role/list?userId=" + userId,
            checkbar: true,
            load: false,
            //response: {message:"msg",statusCode:0},
        });


        dtree.on("node(cskTree1)", function (obj) {
            var nodeId = obj.param.nodeId;
            DTreeNode.clickNodeCheckbar(nodeId);// 点击节点选中复选框
            // var checkbarNodes = dtree.getCheckbarNodesParam("checkbarTreeNode");
            // layer.msg(JSON.stringify(checkbarNodes));
        });


        $("#save_btn").click(function () {
            var params = dtree.getCheckbarNodesParam("cskTree1");
            var ids = [];
            for (var i = 0; i < params.length; i++) {
                ids.push(params[i].nodeId);
            }
            $.post("/user/role/save", {userId: userId, ids: ids}, function (e) {
                if (e.code === 0) {
                    layer.msg(e.msg);
                } else {
                    layer.msg(e.msg);
                }
            });

        });
    });
</script>
</body>
</html>